<template>
	<page-header-wrapper>
		<a-card :bordered="false">

			<div class="table-page-search-wrapper">
				<a-form layout="inline">
					<a-row :gutter="48">
						<a-col :md="8" :sm="24">
							<span class="table-page-search-submitButtons">
								<a-button type="primary" icon="plus" @click="addBanner">添加</a-button>
							</span>
						</a-col>
					</a-row>
				</a-form>
			</div>

			<a-table @change="tablePaginationChange" :pagination="pagination" bordered :dataSource="dataSource"
				:columns="columns" :rowKey="(record,index)=> index">
				<img class="banner-img" slot-scope="text, record" :src="record.image" slot="image" />
				<div slot="action" slot-scope="text, record" href="javascript:;">
					<a @click="updateItem(record)">修改</a>
					<a style="color: #fc2a26;margin-left: 20px; " @click="deletItem(record.id)">删除</a>
				</div>
			</a-table>
		</a-card>
		<addBox ref="addBox" :visible="addFlag" @cancel="addCancel" @ok="AddSuccess">
		</addBox>
	</page-header-wrapper>
</template>

<script>
	import {
		STable,
		Ellipsis,
	} from '@/components'
	import {
		newsList,
		newsDel
	} from '@/api/news'
	import addBox from './add'

	import {
		ExclamationCircleOutlined
	} from '@ant-design/icons-vue';
	import {
		createVNode
	} from 'vue';
	import {
		Modal
	} from 'ant-design-vue';


	export default {
		components: {
			STable,
			Ellipsis,
			addBox,
		},
		data() {
			return {
				addFlag: false,
				pagination: {
					current: 1, //默认当前叶数
					total: 0, // 数据总数 如果不设置就以绑定的数据量为准
					pageSize: 10, // 默认每页条数
					showSizeChanger: true, //是否可以改变 pageSize
					pageSizeOptions: ['10', '20', '40', '80', '100'], //可切换每叶数据条数
					showTotal: total => this.$t('共') + ' ' + `${total}` + ' ' + this.$t('条数据'), // 分页中显示总的数据
					hideOnSinglePage: false // 只有一页时是否隐藏分页器 true为不显示 false为显示
				},
				dataSource: [],
				columns: [{
						title: 'id',
						dataIndex: 'id',
						key: 'id',
						width: 100,
					}, {
						title: '标题',
						dataIndex: 'name',
						key: 'name',
					},
					{
						title: '操作',
						key: 'operation',
						fixed: 'right',
						width: 140,
						scopedSlots: {
							customRender: 'action'
						}
					}
				],
			}
		},
		created() {
			this.getList()
		},
		methods: {
			updateItem(val) {
				this.addFlag = true
				this.$nextTick(() => {
					this.$refs.addBox.setUpdate(val)
				})
			},
			deletItem(id) {
				Modal.confirm({
					title: '提示',
					content: '是否确认删除',
					onOk: () => {
						newsDel({
							id: id
						}).then(res => {
							this.getList()
						})
					}
				})
			},
			addCancel() {
				this.addFlag = false
			},
			AddSuccess() {
				this.addFlag = false
				this.getList()
			},
			addBanner() {
				this.addFlag = true
				this.$nextTick(() => {
					this.$refs.addBox.updateflag = false
					this.$refs.addBox.initAdd()
					this.$refs.addBox.editor.setData('')
				})
			},
			tablePaginationChange(e) {
				this.pagination = e
				this.getList()
			},
			getList() {
				newsList({
					pageNo: this.pagination.current,
					pageSize: this.pagination.pageSize,
				}).then(res => {
					this.pagination.total = res.data.totalCount
					this.dataSource = res.data.data
				})
			},
			getDate(stamp) {
				var date = new Date(stamp * 1000)
				return date.getFullYear() + '-' + (date.getMonth() + 1 < 10 ? ('0' + (date.getMonth() + 1)) : date
					.getMonth() +
					1) + '-' + (date.getDate() < 10 ? '0' + date.getDate() : date.getDate())
			}
		}
	}
</script>
<style scoped>
	.banner-img {
		width: 150px;
		height: 100px;
		border-radius: 5px;
	}
</style>